import { connect } from '@tarojs/redux';
import Taro, { Component } from '@tarojs/taro'
import { View, Text,Image, } from '@tarojs/components'
import './index.less'
import moon from '../../img/moon.png'
import dizhi from '../../img/dizhi.png'

@connect(({ goodsDetails,template }) => ({ goodsDetails,template }))
export default class share extends Component {

  config = {
    navigationBarTitleText: '商品详情',
  }

  handleJump(id){
    Taro.navigateTo({
      url:`../confirmOrder/index?id=${id}`
    })
  }

  componentWillMount () {
    const {id}=this.$router.params;
    const { dispatch } = this.props;
    console.log('goodsDetails componentWillMount id',id);
    dispatch({
      type: 'goodsDetails/init',
      payload:id
    });
  }

  // componentDidMount () { }

  // componentWillUnmount () { }

  // componentDidShow () { }

  // componentDidHide () { }

  render () {
    const{cargo}=this.props.goodsDetails;
    const {details}=this.props.template;
    console.log('goodsDetails render cargo',cargo);
    console.log('goodsDetails render details',details);
    const data = {
      topBanner:'http://iph.href.lu/300x200?text=占位',
      introduction:{
        title:'火锅记忆(瑶海科技店)',
        time:'15:00-23:00',
        address:'合肥市瑶海科技工业园2号楼122号',
      },
      content:{
        img:'http://iph.href.lu/300x200?text=占位',
        name:'2-3人超值套餐',
        label:[
          {
            id:1,
            text:'随时退',
          },{
            id:2,
            text:'免预约',
          },{
            id:3,
            text:'过期自动退',
          }
        ],
        sales:345
      },
      dishes:[
        {
          id:1,
          name:'鸳鸯锅底',
          price:12,
        },{
          id:2,
          name:'精品肥牛',
          price:12,
        },{
          id:3,
          name:'撒尿牛丸',
          price:12,
        },{
          id:4,
          name:'千张',
          price:12,
        },{
          id:5,
          name:'海带',
          price:12,
        },{
          id:6,
          name:'生菜',
          price:12,
        },{
          id:7,
          name:'鸭血',
          price:12,
        },{
          id:8,
          name:'锅巴',
          price:12,
        },{
          id:9,
          name:'酸梅汁',
          price:12,
        },
      ],
      effective:'2019.2.1至2019.5.1',
      rules:[
        {
          id:1,
          text:'无需预约,消费高峰期可能需要等位'
        },{
          id:2,
          text:'商家提供免费WIFI'
        },{
          id:3,
          text:'堂食外带均可，可以打包，详情咨询店家'
        }
      ],
      buy:{
        price:99,
        discount:7,
        highPrice:144
      }
    }
    return (
      <View className='index'>
        <View>
          <Image src={details.imageHash} className='topBanner' />
        </View>
        <View className='introduction-box'>
          <Text className='introduction-title'>{details.name}</Text>
          <View className='introduvtion-line'>
            <Image src={moon} className='icon' />
            <Text className='introduction-time'>{details.time}</Text>
          </View>
          <View>
            <Image src={dizhi} className='icon' />
            <Text className='introduction-address'>{details.address}</Text>
          </View>
        </View>
        <View className='package-box-text'>
          <Text className='introduction-title'>套餐内容</Text>
        </View>
        {/**套餐主体 */}
        <View className='packageBody-box'>
          {/**主体第一个框 套餐简介，介绍 */}
          <View className='packageBody-first-box'>
            {/*<Image src={detail.imageHash} className='content-img' />*/}
            <View className='packageBody-first-right-box'>
              <Text className='content-name'>{cargo.title}</Text>
              <View className='packageBody-first-right-right-box'>
                <View className='first-right-right-first-box'>
                    <Text className='content-label-name'>{cargo.detail}</Text>
                </View>
                {/*<Text className='content-label-name'>半年销量{data.content.sales}</Text>*/}
              </View>
            </View>
          </View>
          {/**套餐菜品 */}
          {/*<View>
            <Text className='dishes-text'>菜品</Text>
            <View>
              {data.dishes.map(dishe=>(
                <View key={dishe.id} className='dishes-line'>
                  <Text className='dishe-name'>·{dishe.name}</Text>
                  <Text className='dishe-price'>￥{dishe.price}</Text>
                </View>
              ))}
            </View>
          </View>*/}
        </View>
        {/**温馨提示 */}
        <View className='prompt-box'>
          <Text className='introduction-title'>温馨提示</Text>
        </View>
        {/**提示主体 */}
        <View className='prompt-body-box'>
          <View className='general-box'>
            <Text className='general-big-text'>有效期:</Text>
            <Text className='general-small-text'>·{data.effective}(周末、法定节假日通用)</Text>
          </View>
          <View className='general-box'>
            <Text className='general-big-text'>使用时间：</Text>
            <Text className='general-small-text'>·24小时可用</Text>
          </View>
          <View className='general-box'>
            <Text className='general-big-text'>使用规则：</Text>
            <View className='general-box'>
              {data.rules.map(rule=>(
                <Text key={rule.id} className='general-small-text'>·{rule.text}</Text>
              ))}
            </View>
          </View>
        </View>
        {/**底部购买 */}
        <View className='bottom-buy-box'>
          {/**左边价格 */}
          <View className='bottom-buy-left-box'>
            <View className='price-top-box'>
              <Text className='price-text'>￥{cargo.price/100}</Text>
              {/*<View className='discount-box'>
                <Text className='discount'>折</Text>
              </View>*/}
            </View>
            <Text className='highPrice'>打折前：￥{cargo.original/100}</Text>
          </View>
          {/**右边抢购 */}
          <View className='bottom-buy-right-box' onClick={this.handleJump.bind(this,cargo.id)}>
            <Text className='bottom-buy-text'>
              立即抢购
            </Text>
          </View>
        </View>
      </View>
    )
  }
}
